import React from 'react'
import { connect } from 'dva';

import {
    Radio, Button, message, Popconfirm, Input, Form, Upload, Icon, Progress, Switch, Modal, Row, Col, InputNumber, Select, Table
} from 'antd';
import './AdminGlobalConfig.less';
import { UrlConfig, getConfig, updateConfig, getStyleConfig, updateStyleConfig, addWaterMark, editWaterMark, detailWaterMark, deleteWaterMark, waterMarkList } from '../../../services/fetch';
import produce from "immer"
const { Option } = Select;
const FormItem = Form.Item;

const templateList = [
    {
        name: "SD-MP4",
        value: [
            { name: "基本参数", value: [{ name: "封装格式", value: "mp4" }, { name: "清晰度", value: "标清" }] },
            { name: "视频参数", value: [{ name: "编码格式", value: "H.264" }, { name: "码率", value: 800 }, { name: "分辨率", value: "848" }, { name: "帧率", value: 25 }, { name: "关键帧最大间隔", value: 25 }] }
        ]
    }, {
        name: "HD-MP4",
        value: [
            { name: "基本参数", value: [{ name: "封装格式", value: "mp4" }, { name: "清晰度", value: "高清" }] },
            { name: "视频参数", value: [{ name: "编码格式", value: "H.264" }, { name: "码率", value: 1800 }, { name: "分辨率", value: "1280" }, { name: "帧率", value: 25 }, { name: "关键帧最大间隔", value: 25 }] }
        ]
    }, {
        name: "LD-MP4",
        value: [
            { name: "基本参数", value: [{ name: "封装格式", value: "mp4" }, { name: "清晰度", value: "超清" }] },
            { name: "视频参数", value: [{ name: "编码格式", value: "H.264" }, { name: "码率", value: 3000 }, { name: "分辨率", value: "1920" }, { name: "帧率", value: 25 }, { name: "关键帧最大间隔", value: 25 }] }
        ]
    }
]
@Form.create()
@connect(({ add }) => ({
    add: add
}))
export default class AdminGlobalConfig extends React.PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            imageUrl: '',
            loading: '',
            config: {},
            visible: false,
            current: { name: "", selectKey: "" },
            visibleSetType: false,
            visibleSetMark: false,
            visibleAddMark: false,
            //首行缩进
            indent: 'open',
            //对齐方式
            justify: 'left',
            //字体
            fontFamilyValue: 'SimSun',
            //字号
            fontSizeValue: '16px',
            //文字颜色
            fontColorValue: '#000000',
            //段前距
            beforeInterval: '10',
            //段后距
            afterInterval: '10',
            //行间距
            lineheight: '1',
            mwidth: '',
            mheight: '',
            type: '',
            waterMarkList: [],
            currentId: null,
            scanNum: false,
            forwardNum: false,
            thumbsUpNum: false,
            permission: []
        }
    }



    init = () => {
        waterMarkList().then(res => {
            if (res.data.code == 200) {
                console.log(res)
                let arr = []
                let begin = [...res.data.data.data]
                console.log(begin)
                begin.forEach(item => {
                    if (item.default == 1) {
                        localStorage.setItem('defaultMarkId', item.id)
                    }
                    if (item.config) {
                        let obj = {
                            mark_name: item.name,
                            id: item.id,
                            default: item.default,
                            ...item.config.watermake
                        }
                        arr.push(obj)
                    }

                })
                console.log(arr)

                this.setState({
                    waterMarkList: arr
                })
            }
        })
    }

    /**
   * 上传插件
   */
    fcUpload = (key) => {
        window.fc = new window.FcUpload({
            elem: 'fcUpload',
            oss: this.props.add.configJson.aliyunOssSwitch,       //是否为oss 上传
            multiple: false,  //是否允许上传多个文件
            type: 'img', // 上传文件类型\ img 图片，  video 视频
            offWaterMark: true,// 上传头像关闭
            newWaterMark: true,
            actionImg: `${UrlConfig}/fcpublic/uploads/uploadImg`,  //本地上传图片地址
            actionVideo: `${UrlConfig}/fcpublic/uploads/uploadVideo`,  //本地上传视频地址
            actionOss: this.props.add.configJson.actionOss,  //后端认证接口，获取临时上传凭证
            endpoint: this.props.add.configJson.endpoint,
            bucket: this.props.add.configJson.bucket,
            customDomain: this.props.add.configJson.customDomain,
            ossConfig: this.props.add.configJson,
            callback: (callRes) => {
                let url;
                if (callRes.oss) {  // oss 和本地返回数据结构不一样
                    url = callRes.response[0];
                } else {
                    url = callRes.response[0].data;
                }
                let obj = {};
                obj[key] = url;
                this.props.form.setFieldsValue(obj);
            }
        })

        window.fc.show();
    }


    onChangeSelectFamily = value => {
        this.setState({
            fontFamilyValue: value
        })
    }

    onChangeSelectSize = value => {
        this.setState({
            fontSizeValue: value
        })
    }

    onChangeSelectColor = e => {
        console.log(e.target.value)
        this.setState({
            fontColorValue: e.target.value
        })
    }

    onChangeSelectBefore = value => {
        this.setState({
            beforeInterval: value
        })
    }

    onChangeSelectAfter = value => {
        this.setState({
            afterInterval: value
        })
    }

    onChangeSelectrow = value => {
        this.setState({
            lineheight: value
        })
    }



    onChangeRadio = e => {
        this.setState({
            indent: e.target.value,
        });
    };
    onChangeRadioButton = e => {
        this.setState({
            justify: e.target.value,
        });
    };

    componentDidMount() {
        getConfig().then((res) => {
            if (res.data.code == 200) {
                console.log(res);
                this.setState({
                    config_json: res.data.data.config_json
                })
                this.props.form.setFieldsValue(res.data.data.config_json)
            }
        })
        this.init()
        console.log(this.props.add.configJson,)
        this.setState({
            permission: JSON.parse(localStorage.getItem('permissionzx')) || []
        })
    }

    submit = () => {
        this.props.form.validateFields((err, values) => {
            let obj = { ...this.state.config_json, ...values };
            let data = {
                config_id: 1,
                config_json: obj
            }
            updateConfig(data).then((res) => {
                if (res.data.code == 200) {
                    message.success('保存成功!');
                    message.success('修改版本成功,即将自动刷新. . . . .');
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                }
            })
            // console.log(values);
        })
    }

    /**
      * 图片上传回调
      */
    handleImgChange = (info, loading = 'loading') => {
        let obj = {};
        obj[loading] = true;
        if (info.file.status == 'error') {
            this.setState({ imgError: true });
            return '';
        }
        if (info.event) {
            this.setState({ percentImage: Math.ceil(info.event.percent) })
        }
        if (info.file.status === 'uploading') {
            obj = { ...obj, imgError: false };
            this.setState(obj);
            return '';
        }
        if (info.file.status === 'done') {
            obj[loading] = false;
            obj = { ...obj, imgError: false };
            this.setState(obj);

            if (info.file.response.data) {
                return info.file.response.data;
            }
        }
    }
    handleOk = () => {
        this.setState({
            visible: false, config_json: produce(this.state.config_json, draftState => {
                draftState[this.state.current.selectKey] = templateList.find(x => x.name == this.state.current.name)
            })
        });
    }
    handleCancel = () => {

        this.setState({ visible: false });
    }
    handleSetTemplate = (key, template) => {

        this.setState({ visible: true, current: { name: template ? template.name : "", selectKey: key } });
    }
    handleSetType = (key, template) => {
        getStyleConfig().then(res => {
            console.log(res)
            if (res.data.code == 200) {
                if (res.data.data.config_json !== {}) {
                    let config_json = res.data.data.config_json
                    this.setState({
                        fontFamilyValue: config_json['font-family'],
                        fontSizeValue: config_json.font_size,
                        fontColorValue: config_json.color,
                        beforeInterval: config_json.beforeInterval,
                        afterInterval: config_json.afterInterval,
                        lineheight: config_json.lineheight,
                        justify: config_json.justify,
                        indent: config_json.indent
                    }, () => {
                        this.setState({ visibleSetType: true });
                    })
                }

            }
        })


    }
    handleTypeOk = () => {
        let params = {
            config_json: {
                ['font-family']: this.state.fontFamilyValue,
                font_size: this.state.fontSizeValue,
                color: this.state.fontColorValue,
                beforeInterval: this.state.beforeInterval,
                afterInterval: this.state.afterInterval,
                lineheight: this.state.lineheight,
                justify: this.state.justify,
                indent: this.state.indent
            }
        }
        updateStyleConfig(params).then(res => {
            console.log(res)
            if (res.data.code == 200) {

                message.success('配置成功！')
                this.setState({
                    visibleSetType: false,
                });
            } else {
                message.error('配置失败！')
            }
        })
    }
    handleTypeCancel = () => {

        this.setState({ visibleSetType: false });
    }

    handleSetMark = () => {
        this.setState({
            visibleSetMark: true
        })
    }
    handleSetMarkOk = () => {
        this.setState({
            visibleSetMark: false
        })
    }
    handleSetMarkCancle = () => {
        this.setState({
            visibleSetMark: false
        })
    }
    handleDeleteMark = (id) => {
        deleteWaterMark({ id: id }).then(res => {
            if (res.data.code == 200) {
                message.success('删除成功！')
                this.init()
            }
        })
    }
    handleAddMark = (type, id) => {
        if (type == '编辑模板') {
            this.setState({
                currentId: id
            })
            detailWaterMark({ id: id }).then(res => {

                if (res.data.code == 200) {
                    let begin = res.data.data
                    let obj = {
                        mark_name: begin.name,
                        id: begin.id,
                        ...begin.config.watermake
                    }
                    this.props.form.setFieldsValue(obj)
                    console.log(res)
                }

            })
        } else {
            this.props.form.setFieldsValue({
                mark_img: null,
                mark_x: '10',
                mark_y: '10',
                mark_proportion: 10,
                mark_name: ''
            })
        }
        this.setState({
            visibleAddMark: true,
            type: type
        })
    }
    handleAddMarkOk = (type) => {
        console.log(type)
        this.props.form.validateFields((err, value) => {
            if (!err) {
                let result = value
                let str = result.mark_img
                console.log(str)
                if (str !== null) {
                    str = str.replace('http://hsyoss.sobeylingyun.com/', '')
                }

                console.log(result)
                if (type == '编辑模板') {
                    let params2 = {
                        id: this.state.currentId,
                        name: result.mark_name,
                        config: {
                            watermake: {
                                mark_img: result.mark_img,
                                mark_position: result.mark_position == '' ? 'se' : result.mark_position,
                                mark_x: result.mark_x == '' ? '10' : result.mark_x,
                                mark_y: result.mark_y == '' ? '10' : result.mark_y,
                                mark_proportion: result.mark_proportion == null ? 10 : result.mark_proportion,
                                mark_path: str
                            }
                        }
                    }
                    console.log(params2)
                    editWaterMark(params2).then(res => {
                        console.log(res)
                        if (res.data.code == 200) {
                            message.success('修改成功！')
                            this.init()
                        }
                    })

                } else {
                    let params = {
                        name: result.mark_name,
                        config: {
                            watermake: {
                                mark_img: result.mark_img,
                                mark_position: result.mark_position == '' ? 'se' : result.mark_position,
                                mark_x: result.mark_x == '' ? '10' : result.mark_x,
                                mark_y: result.mark_y == '' ? '10' : result.mark_y,
                                mark_proportion: result.mark_proportion == null ? 10 : result.mark_proportion,
                                mark_path: str
                            }
                        }
                    }
                    addWaterMark(params).then(res => {
                        if (res.data.code == 200) {
                            message.success('新增成功！')
                            this.init()
                        }
                    })

                }

                this.props.form.setFieldsValue({
                    mark_img: null,
                    mark_x: '10',
                    mark_y: '10',
                    mark_proportion: 10,
                    mark_name: ''
                })
                this.setState({
                    visibleAddMark: false,
                    mwidth: '',
                    mheight: ''
                })
            }

        })

    }
    handleAddMarkCancle = () => {
        this.props.form.setFieldsValue({
            mark_img: null,
            mark_x: '10',
            mark_y: '10',
            mark_proportion: 10,
            mark_name: ''
        })
        this.setState({
            visibleAddMark: false,
            mwidth: '',
            mheight: ''
        })
    }
    handleInputWitdh = (e) => {
        this.setState({
            mwidth: e.target.value
        })
    }
    handleInputHeight = (e) => {
        this.setState({
            mheight: e.target.value
        })
    }
    onChange = (e) => {
        this.setState({ current: { ...this.state.current, name: e.target.value } });
    }


    forwardNum = (e) => {
        let num1 = e.target.value
        if (num1.search('~') !== -1) {
            this.setState({
                forwardNum: true
            })
        } else {
            this.setState({
                forwardNum: false
            })
        }

    }

    thumbsUpNum = (e) => {
        let num2 = e.target.value
        if (num2.search('~') !== -1) {
            this.setState({
                thumbsUpNum: true
            })
        } else {
            this.setState({
                thumbsUpNum: false
            })
        }
    }

    scanNum = (e) => {
        let num3 = e.target.value
        if (num3.search('~') !== -1) {
            this.setState({
                scanNum: true
            })
        } else {
            this.setState({
                scanNum: false
            })
        }
    }
    changeDefault = (value, record) => {
        console.log(record)
        if (record.default == 2) {
            localStorage.setItem('defaultMarkId', record.id)
        } else {
            localStorage.setItem('defaultMarkId', null)
        }


        let params2 = {
            id: record.id,
            name: record.mark_name,
            default: value ? 1 : 2,
            config: {
                watermake: {
                    mark_img: record.mark_img,
                    mark_position: record.mark_position == '' ? 'se' : record.mark_position,
                    mark_x: record.mark_x == '' ? '10' : record.mark_x,
                    mark_y: record.mark_y == '' ? '10' : record.mark_y,
                    mark_proportion: record.mark_proportion == null ? 10 : record.mark_proportion,
                    mark_path: record.mark_path
                }
            }
        }
        console.log(params2)
        editWaterMark(params2).then(res => {
            console.log(res)
            if (res.data.code == 200) {
                message.success('设置成功！')
                this.init()
            }
        })
    }

    render() {

        const columns = [
            {
                title: '水印模板名称',
                dataIndex: 'mark_name',
                key: 'mark_name',
                align: 'center'
            },
            {
                title: '水印图片',
                dataIndex: 'mark_img',
                key: 'mark_img',
                align: 'center',
                render: (text, record) => {
                    return (
                        <img style={{ width: '100px', height: 'auto' }} src={text}></img>
                    )
                }
            },
            {
                title: '水印占比',
                dataIndex: 'mark_proportion',
                key: 'mark_proportion',
                align: 'center',
            },
            {
                title: '水印位置',
                dataIndex: 'mark_position',
                key: 'mark_position',
                align: 'center',
                render: (text, record) => {
                    let obj = {
                        ne: '右上', nw: '左上', se: '右下', sw: '左下'
                    }
                    return (
                        <>
                            <Row>
                                <Col span={16}>位置：</Col>
                                <Col span={8}>{obj[text]}</Col>
                            </Row>
                            <Row>
                                <Col span={16}>水平偏移:</Col>
                                <Col span={8}>{record.mark_x + 'px'}</Col>
                            </Row>
                            <Row>
                                <Col span={16}>垂直偏移:</Col>
                                <Col span={8}>{record.mark_y + 'px'}</Col>
                            </Row>
                        </>
                    )
                }
            }, {
                title: '默认',
                dataIndex: 'default',
                key: 'default',
                align: 'center',
                render: (text, record) => {
                    return (
                        <Switch checkedChildren="开" checked={text == 1 ? true : false} onClick={(value) => this.changeDefault(value, record)} unCheckedChildren="关" />
                    )
                }
            },
            {
                title: '操作',
                align: 'center',
                render: (text, record) => {
                    return (
                        <div>
                            <Button type="link" onClick={() => this.handleAddMark('编辑模板', record.id)}>编辑</Button>
                            <Button type="link" onClick={() => this.handleDeleteMark(record.id)}>删除</Button>
                        </div>
                    )
                }
            },
        ]

        const layout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 16 },
        };
        const layout2 = {
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
        };
        const {
            getFieldDecorator
        } = this.props.form;
        const { config_json } = this.state;
        const formValues = this.props.form.getFieldsValue();

        const radioStyle = {
            display: 'block',
            height: '30px',
            lineHeight: '30px',
        };
        // 阿里云
        const renderAliyun = (config, formValues, form) => {
            return (
                <>
                    <div className={formValues.aliyunOssSwitch && formValues.cloudCompany == 'aliyun' ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">OSS缩略图规则名称</div>
                                <div className="t2">填写规则之后按规则生成缩略图，规则在阿里云OSS控制台bucket中的“图片处理”菜单配置</div>
                            </div>
                            <div className="i-right">
                                {form.getFieldDecorator('aliyunOssThumbnail', { initialValue: config.aliyunOssThumbnail || '', })(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>

                    <div className={formValues.aliyunOssSwitch && formValues.cloudCompany == 'aliyun' ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">OSS大缩略图规则名称</div>
                                <div className="t2">比缩略图更大的图片，用于需要展示大图的版面，规则在阿里云OSS控制台bucket中的“图片处理”菜单配置</div>
                            </div>
                            <div className="i-right">
                                {form.getFieldDecorator('aliyunOssBigThumbnail', { initialValue: config.aliyunOssBigThumbnail || '', })(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>
                    <div className={formValues.aliyunOssSwitch && formValues.cloudCompany == 'aliyun' ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">OSS webp格式转换规则名称</div>
                                <div className="t2">ios不支持webp图片格式，OSS bucket中配置此规则后会将webp图片转换为其他兼容的格式</div>
                            </div>
                            <div className="i-right">
                                {form.getFieldDecorator('aliyunOssWebp', { initialValue: config.aliyunOssWebp || '', })(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>



                    <div className={formValues.aliyunOssSwitch && formValues.cloudCompany == 'aliyun' ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">OSS后端认证接口</div>
                                <div className="t2">通过后端认证接口获取临时上传凭证，不将账号信息存储在前端、以保障账号安全</div>
                            </div>
                            <div className="i-right">
                                {form.getFieldDecorator('actionOss', { initialValue: config.actionOss || '', })(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>



                    <div className={formValues.aliyunOssSwitch && formValues.cloudCompany == 'aliyun' ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">region_id-区域ID</div>
                                <div className="t2">region_id 表示 OSS 存储的区域ID。（如：cn-beijing）</div>
                            </div>
                            <div className="i-right">
                                {form.getFieldDecorator('aliyunRegionID', { initialValue: config.aliyunRegionID || '', })(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>

                    <div className={formValues.aliyunOssSwitch && formValues.cloudCompany == 'aliyun' ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">endpoint-oss外网访问域名</div>
                                <div className="t2">Endpoint 表示 OSS 对外服务的访问域名。用于oss上传（如：oss-cn-beijing.aliyuncs.com）</div>
                            </div>
                            <div className="i-right">
                                {form.getFieldDecorator('endpoint', { initialValue: config.endpoint || '', })(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>

                    <div className={formValues.aliyunOssSwitch && formValues.cloudCompany == 'aliyun' ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">自定义 OSS 访问域名</div>
                                <div className="t2">绑定自定义域名，可以使用此地址访问存储空间文件</div>
                            </div>
                            <div className="i-right">
                                {form.getFieldDecorator('customDomain', {
                                    rules: [
                                        {
                                            pattern: /^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i,
                                            message: '请输入正确的URL地址'
                                        }
                                    ], initialValue: config.customDomain || ''
                                })(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>

                    <div className={formValues.aliyunOssSwitch && formValues.cloudCompany == 'aliyun' ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">bucket-存储空间</div>
                                <div className="t2">存储空间是用于存储对象（Object）的容器，所有的对象都必须隶属于某个存储空间。</div>
                            </div>
                            <div className="i-right">
                                {form.getFieldDecorator('bucket', { initialValue: config.bucket || '', })(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>

                    <div className={formValues.aliyunOssSwitch && formValues.cloudCompany == 'aliyun' ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">富文本编辑器上传图片最大宽度（px）</div>
                                <div className="t2">超过限制宽度的图片会被压缩</div>
                            </div>
                            <div className="i-right">
                                {form.getFieldDecorator('oss_rich_width', { initialValue: config.oss_rich_width || '', })(
                                    <InputNumber />
                                )}
                            </div>
                        </div>
                    </div>
                </>
            );
        };
        // 华为云
        const renderHuaweiyun = (config, formValues, form) => {
            return (
                <>
                    <div>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">访问域名</div>
                                <div className="t2"></div>
                            </div>
                            <div className="i-right">
                                {form.getFieldDecorator('huaweiDomain', { initialValue: config.huaweiDomain || '', })(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>
                    <div>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">项目ID</div>
                                <div className="t2"></div>
                            </div>
                            <div className="i-right">
                                {form.getFieldDecorator('projectId', { initialValue: config.projectId || '', })(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>
                    <div>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">终端节点</div>
                                <div className="t2"></div>
                            </div>
                            <div className="i-right">
                                {form.getFieldDecorator('huaweiEndpoint', { initialValue: config.huaweiEndpoint || '', })(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>

                </>
            );
        };
        // 优刻得
        const renderUcloud = (config, formValues, form) => {
            return (
                <>
                    <div >
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">访问域名</div>
                                <div className="t2"></div>
                            </div>
                            <div className="i-right">
                                {form.getFieldDecorator('ucloudDomain', {
                                    initialValue: config.ucloudDomain || '',
                                })(<Input />)}
                            </div>
                        </div>
                    </div>
                    <div >
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">bucket—存储空间</div>
                                <div className="t2"></div>
                            </div>
                            <div className="i-right">
                                {form.getFieldDecorator('ucloudBucketName', {
                                    initialValue: config.ucloudBucketName || '',
                                })(<Input />)}
                            </div>
                        </div>
                    </div>
                    <div >
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">PublicKey—公钥</div>
                                <div className="t2"></div>
                            </div>
                            <div className="i-right">
                                {form.getFieldDecorator('ucloudPublicKey', {
                                    initialValue: config.ucloudPublicKey || '',
                                })(<Input />)}
                            </div>
                        </div>
                    </div>
                    <div >
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">PrivateKey—私钥</div>
                                <div className="t2"></div>
                            </div>
                            <div className="i-right">
                                {form.getFieldDecorator('ucloudPrivateKey', {
                                    initialValue: config.ucloudPrivateKey || '',
                                })(<Input />)}
                            </div>
                        </div>
                    </div>
                    <div >
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">转码接口地址</div>
                                <div className="t2"></div>
                            </div>
                            <div className="i-right">
                                {form.getFieldDecorator('ucloudTransUrl', {
                                    initialValue: config.ucloudTransUrl || '',
                                })(<Input />)}
                            </div>
                        </div>
                    </div>
                    <div >
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">转码公钥</div>
                                <div className="t2"></div>
                            </div>
                            <div className="i-right">
                                {form.getFieldDecorator('ucloudTransPublicKey', {
                                    initialValue: config.ucloudTransPublicKey || '',
                                })(<Input />)}
                            </div>
                        </div>
                    </div>
                    <div >
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">转码私钥</div>
                                <div className="t2"></div>
                            </div>
                            <div className="i-right">
                                {form.getFieldDecorator('ucloudTransPrivateKey', {
                                    initialValue: config.ucloudTransPrivateKey || '',
                                })(<Input />)}
                            </div>
                        </div>
                    </div>
                    <div >
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">转码模板code</div>
                                <div className="t2"></div>
                            </div>
                            <div className="i-right">
                                {form.getFieldDecorator('ucloudTransTemplateCode', {
                                    initialValue: config.ucloudTransTemplateCode || '',
                                })(<Input />)}
                            </div>
                        </div>
                    </div>
                </>
            );
        };

        const witdhHeight = () => {
            return (
                <div style={{ display: 'flex' }}>
                    <Input style={{ width: '180px', marginRight: '10px' }} suffix="px" /> × <Input style={{ width: '180px', marginLeft: '10px' }} suffix="px" />
                </div>
            )
        }
        return (
            <section className="AppGlobalConfig">
                <header>
                    后台全局配置
                </header>
                <div className='content'>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">MOC内容库</div>
                            <div className="t2">新建左侧MOC内容库开关</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('mocSwitch', { valuePropName: 'checked' })(
                                <Switch checkedChildren="开" unCheckedChildren="关" />
                            )}
                        </div>
                    </div>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">MCH内容库</div>
                            <div className="t2">新建左侧MCH内容库开关</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('mchSwitch', { valuePropName: 'checked' })(
                                <Switch checkedChildren="开" unCheckedChildren="关" />
                            )}
                        </div>
                    </div>
                    <div className={formValues.mchSwitch ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">MCH内容库命名</div>
                                <div className="t2">建议6字以内</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('mchTitle', {
                                    initialValue: '内容库'
                                })(
                                    <Input />
                                )}
                            </div>
                        </div>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">MCH插件Js地址</div>
                                <div className="t2">MCH部署的js地址</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('mchJs')(
                                    <Input />
                                )}
                            </div>
                        </div>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">MCH地址</div>
                                <div className="t2">MCH部署的地址和端口</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('mchHost')(
                                    <Input />
                                )}
                            </div>
                        </div>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">MCH-token</div>
                                <div className="t2">用户登录后token</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('mchToken')(
                                    <Input />
                                )}
                            </div>
                        </div>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">MCH-SiteCode</div>
                                <div className="t2">登录的站点code</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('mchSiteCode')(
                                    <Input />
                                )}
                            </div>
                        </div>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">MCH-UserCode</div>
                                <div className="t2">登录的用户code</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('userCode')(
                                    <Input />
                                )}
                            </div>
                        </div>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">是否启用JOVE Lite</div>
                                <div className="t2"></div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('isJoveLite', { valuePropName: 'checked', initialValue: false })(
                                    <Switch checkedChildren="是" unCheckedChildren="否" />
                                )}
                            </div>
                        </div>
                        <div className={formValues.isJoveLite ? 'item' : 'none'}>
                            <div className="i-left">
                                <div className="t1">JOVE-HOST</div>
                                <div className="t2"></div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('joveHost')(
                                    <Input />
                                )}
                            </div>
                        </div>
                        <div className={formValues.aliyunOssSwitch ? '' : 'none'}>
                            <div className="item">
                                <div className="i-left">
                                    <div className="t1">是否开启素材入JOVE库</div>
                                    <div className="t2">开启则自动将视频推送到JOVE库，目前只支持OSS，请先开启OSS</div>
                                </div>
                                <div className="i-right">
                                    {getFieldDecorator('materialPushSwitch', { valuePropName: 'checked' })(
                                        <Switch checkedChildren="开" unCheckedChildren="关" />
                                    )}
                                </div>
                            </div>
                        </div>

                        <div className={formValues.materialPushSwitch && formValues.aliyunOssSwitch ? '' : 'none'}>
                            <div className="item">
                                <div className="i-left">
                                    <div className="t1">素材入库系统标识</div>
                                    <div className="t2">由JOVE分配的系统标识</div>
                                </div>
                                <div className="i-right">
                                    {getFieldDecorator('materialSystemid')(
                                        <Input />
                                    )}
                                </div>
                            </div>
                        </div>

                        <div className={formValues.materialPushSwitch && formValues.aliyunOssSwitch ? '' : 'none'}>
                            <div className="item">
                                <div className="i-left">
                                    <div className="t1">素材入库根目录标识</div>
                                    <div className="t2">由JOVE分配的文件根目录标志</div>
                                </div>
                                <div className="i-right">
                                    {getFieldDecorator('materialRootDirectory')(
                                        <Input />
                                    )}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">MCH推送数据来源</div>
                            <div className="t2">自定义MCH推送过来的文章、视频的来源名称</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('mchSource', {
                                initialValue: '融媒体'
                            })(
                                <Input />
                            )}
                        </div>
                    </div>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">天马爬虫数据库</div>
                            <div className="t2">新建左侧-天马爬虫素材库</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('tmSwitch', { valuePropName: 'checked' })(
                                <Switch checkedChildren="开" unCheckedChildren="关" />
                            )}
                        </div>
                    </div>
                    <div className={formValues.tmSwitch ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">天马素材库命名</div>
                                <div className="t2">建议6字以内</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('tmTitle', {
                                    initialValue: '天马素材库'
                                })(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">iData-舆情数据</div>
                            <div className="t2">舆情数据为索贝idata舆情管理平台提供的数据内容，包含全网网站、微信、微博、头条号、app、报纸等数据。</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('yqSwitch', { valuePropName: 'checked', initialValue: false })(
                                <Switch checkedChildren="是" unCheckedChildren="否" />
                            )}
                        </div>
                    </div>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">魔盒样式库</div>
                            <div className="t2">新建左侧-魔盒样式库</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('mhSwitch', { valuePropName: 'checked' })(
                                <Switch checkedChildren="开" unCheckedChildren="关" />
                            )}
                        </div>
                    </div>
                    <div className={formValues.mhSwitch ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">魔盒样式库地址</div>
                                <div className="t2">云样式列表接口</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('mhUrl', {
                                    initialValue: '魔盒样式库地址'
                                })(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">是否开启积分规则</div>
                            <div className="t2">开启积分规则后，用户阅读，评论，分享即可获得相应积分。</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('scoreSwitch', { valuePropName: 'checked' })(
                                <Switch checkedChildren="开" unCheckedChildren="关" />
                            )}
                        </div>
                    </div>


                    <div className="item">
                        <div className="i-left">
                            <div className="t1">是否开启文章敏感词过滤</div>
                            <div className="t2">开启后，文章保存会检测是否有敏感词。</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('sensitivewordsSwitch', { valuePropName: 'checked' })(
                                <Switch checkedChildren="开" unCheckedChildren="关" />
                            )}
                        </div>
                    </div>

                    <div className={formValues.scoreSwitch ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">评论积分</div>
                                <div className="t2">用户评论文章时获得的积分数量</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('commentScore', {
                                    initialValue: 1
                                })(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>
                    <div className={formValues.scoreSwitch ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">阅读积分</div>
                                <div className="t2">用户阅读文章时获得的积分数量</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('readScore', {
                                    initialValue: 1
                                })(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>

                    <div className={formValues.scoreSwitch ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">分享积分</div>
                                <div className="t2">用户分享文章时获得的积分数量</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('shareScore', {
                                    initialValue: 0
                                })(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>
                    <div className={formValues.scoreSwitch ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">点赞积分</div>
                                <div className="t2">用户点赞文章时获得的积分数量</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('likeScore', {
                                    initialValue: 0
                                })(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>
                    <div className={formValues.scoreSwitch ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">当日最大积分数</div>
                                <div className="t2">用户每日获得的积分数量最大值</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('max_point', {

                                })(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>


                    <div className="item">
                        <div className="i-left">
                            <div className="t1">阿里云access_key_id</div>
                            <div className="t2">访问阿里云API的密钥对应的ID</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('aliyunAccessID')(
                                <Input />
                            )}
                        </div>
                    </div>


                    <div className="item">
                        <div className="i-left">
                            <div className="t1">阿里云access_key_secret</div>
                            <div className="t2">访问阿里云API的密钥</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('aliyunAccessSecret')(
                                <Input />
                            )}
                        </div>
                    </div>

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">阿里云角色资源描述符</div>
                            <div className="t2">用于获取临时授权，在RAM的控制台的资源详情页上可以获取</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('aliyunRoleArn')(
                                <Input />
                            )}
                        </div>
                    </div>


                    <div className="item">
                        <div className="i-left">
                            <div className="t1">是否开启OSS上传</div>
                            <div className="t2">开启则上传至阿里云OSS对象存储</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('aliyunOssSwitch', { valuePropName: 'checked' })(
                                <Switch checkedChildren="开" unCheckedChildren="关" />
                            )}
                        </div>
                    </div>
                    <div className={formValues.aliyunOssSwitch ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">云服务商</div>
                                <div className="t2"></div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('cloudCompany')(
                                    <Radio.Group>
                                        <Radio value='aliyun'>阿里云</Radio>
                                        <Radio value='huaweiyun'>华为云</Radio>
                                        <Radio value='ucloud'>移动云</Radio>
                                    </Radio.Group>
                                )}
                            </div>
                        </div>
                    </div>
                    {formValues.aliyunOssSwitch && formValues.cloudCompany == 'aliyun'
                        ? renderAliyun(
                            (config_json) || {},
                            formValues,
                            this.props.form,
                        )
                        : null}
                    {formValues.aliyunOssSwitch && formValues.cloudCompany == 'huaweiyun'
                        ? renderHuaweiyun(
                            (config_json) || {},
                            formValues,
                            this.props.form,
                        )
                        : null}
                    {formValues.aliyunOssSwitch && formValues.cloudCompany == 'ucloud'
                        ? renderUcloud(
                            (config_json) || {},
                            formValues,
                            this.props.form,
                        )
                        : null}
                    {/* <div className={formValues.aliyunOssSwitch && formValues.cloudCompany == 'aliyun' ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">OSS缩略图规则名称</div>
                                <div className="t2">填写规则之后按规则生成缩略图，规则在阿里云OSS控制台bucket中的“图片处理”菜单配置</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('aliyunOssThumbnail')(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>

                    <div className={formValues.aliyunOssSwitch && formValues.cloudCompany == 'aliyun' ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">OSS大缩略图规则名称</div>
                                <div className="t2">比缩略图更大的图片，用于需要展示大图的版面，规则在阿里云OSS控制台bucket中的“图片处理”菜单配置</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('aliyunOssBigThumbnail')(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>
                    <div className={formValues.aliyunOssSwitch && formValues.cloudCompany == 'aliyun' ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">OSS webp格式转换规则名称</div>
                                <div className="t2">ios不支持webp图片格式，OSS bucket中配置此规则后会将webp图片转换为其他兼容的格式</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('aliyunOssWebp')(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>

                    <div className={formValues.aliyunOssSwitch && formValues.cloudCompany == 'aliyun' ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">OSS水印规则名称</div>
                                <div className="t2">用于给原图增加水印，规则在阿里云OSS控制台bucket中的“图片处理”菜单配置</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('aliyunOssWater')(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>

                    <div className={formValues.aliyunOssSwitch && formValues.cloudCompany == 'aliyun' ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">OSS后端认证接口</div>
                                <div className="t2">通过后端认证接口获取临时上传凭证，不将账号信息存储在前端、以保障账号安全</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('actionOss')(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>



                    <div className={formValues.aliyunOssSwitch && formValues.cloudCompany == 'aliyun' ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">region_id-区域ID</div>
                                <div className="t2">region_id 表示 OSS 存储的区域ID。（如：cn-beijing）</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('aliyunRegionID')(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>

                    <div className={formValues.aliyunOssSwitch && formValues.cloudCompany == 'aliyun' ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">endpoint-oss外网访问域名</div>
                                <div className="t2">Endpoint 表示 OSS 对外服务的访问域名。用于oss上传（如：oss-cn-beijing.aliyuncs.com）</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('endpoint')(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div> */}


                    {/*<div className={formValues.aliyunOssSwitch ? '' : 'none'}>*/}
                    {/*    <div className="item">*/}
                    {/*        <div className="i-left">*/}
                    {/*            <div className="t1">endpoint-内网访问域名</div>*/}
                    {/*            <div className="t2">表示 OSS 对内服务的访问域名，用于转码操作等（如：oss-cn-beijing-internal.aliyuncs.com）</div>*/}
                    {/*        </div>*/}
                    {/*        <div className="i-right">*/}
                    {/*            {getFieldDecorator('endpointInternal')(*/}
                    {/*                <Input />*/}
                    {/*            )}*/}
                    {/*        </div>*/}
                    {/*    </div>*/}
                    {/*</div>*/}


                    {/* <div className={formValues.aliyunOssSwitch && formValues.cloudCompany == 'aliyun' ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">自定义 OSS 访问域名</div>
                                <div className="t2">绑定自定义域名，可以使用此地址访问存储空间文件</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('customDomain', {
                                    rules: [
                                        {
                                            pattern: /^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i,
                                            message: '请输入正确的URL地址'
                                        }
                                    ],
                                })(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>

                    <div className={formValues.aliyunOssSwitch && formValues.cloudCompany == 'aliyun' ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">bucket-存储空间</div>
                                <div className="t2">存储空间是用于存储对象（Object）的容器，所有的对象都必须隶属于某个存储空间。</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('bucket')(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>
                    <div className={formValues.aliyunOssSwitch && formValues.cloudCompany == 'aliyun' ? '' : 'none'}>
                        <div className="item" >
                            <div className="i-left">
                                <div className="t1">是否开启阿里云视频转码</div>
                                <div className="t2">开启则上传视频后自动转码</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('aliyunTranscodeSwitch', { valuePropName: 'checked', })(
                                    <Switch checkedChildren="开" unCheckedChildren="关" />
                                )}
                            </div>
                        </div>
                    </div>


                    <div className={formValues.aliyunOssSwitch && formValues.cloudCompany == 'aliyun' && formValues.aliyunTranscodeSwitch ? '' : 'none'}>

                        <div className="item">
                            <div className="i-left">
                                <div className="t1">原码转标清</div>
                                <div className="t2">开启并选择转码模板后，自动将原视频转为标清视频</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('transcodeSDSwitch', { valuePropName: 'checked' })(
                                    <Switch checkedChildren="开" unCheckedChildren="关" />
                                )}
                                <Button onClick={this.handleSetTemplate.bind(this, "SDTemplate", config_json.SDTemplate)} type="link">{config_json.SDTemplate && config_json.SDTemplate.name ? config_json.SDTemplate.name : "设置转码模版"}</Button>
                            </div>
                        </div>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">原码转高清</div>
                                <div className="t2">开启并选择转码模板后，自动将原视频转为高清视频</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('transcodeHDSwitch', { valuePropName: 'checked' })(
                                    <Switch checkedChildren="开" unCheckedChildren="关" />
                                )}
                                <Button onClick={this.handleSetTemplate.bind(this, "HDTemplate", config_json.HDTemplate)} type="link">{config_json.HDTemplate && config_json.HDTemplate.name ? config_json.HDTemplate.name : "设置转码模版"}</Button>
                            </div>
                        </div>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">原码转超清</div>
                                <div className="t2">开启并选择转码模板后，自动将原视频转为超清视频</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('transcodeLDSwitch', { valuePropName: 'checked' })(
                                    <Switch checkedChildren="开" unCheckedChildren="关" />
                                )}
                                <Button onClick={this.handleSetTemplate.bind(this, "LDTemplate", config_json.LDTemplate)} type="link">{config_json.LDTemplate && config_json.LDTemplate.name ? config_json.LDTemplate.name : "设置转码模版"}</Button>
                            </div>
                        </div>

                        <div className="item">
                            <div className="i-left">
                                <div className="t1">pipeline_id-视频转码管道id</div>
                                <div className="t2">需在阿里云媒体处理控制台配置</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('aliyunPipelineID')(
                                    <Input />
                                )}
                            </div>
                        </div>

                    </div> */}
                    {/* <div className={formValues.aliyunOssSwitch && formValues.cloudCompany == 'huaweiyun' ? '' : 'none'} >
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">访问域名</div>
                                <div className="t2"></div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('huaweiDomain')(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>
                    <div className={formValues.aliyunOssSwitch && formValues.cloudCompany == 'huaweiyun' ? '' : 'none'} >
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">项目ID</div>
                                <div className="t2"></div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('projectId')(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>
                    <div className={formValues.aliyunOssSwitch && formValues.cloudCompany == 'huaweiyun' ? '' : 'none'} >
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">终端节点</div>
                                <div className="t2"></div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('huaweiEndpoint')(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div> */}




                    <div className={!formValues.aliyunOssSwitch ? '' : 'none'}>

                        <div className="item">
                            <div className="i-left">
                                <div className="t1">本地cdn域名</div>
                                <div className="t2"></div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('customLocalImageDomain')(
                                    <Input />
                                )}
                            </div>
                        </div>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">上传视频cdn域名(不填则同本地cdn域名)</div>
                                <div className="t2"></div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('customLocalVideoDomain')(
                                    <Input />
                                )}
                            </div>
                        </div>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">扩充资源盘</div>
                                <div className="t2"></div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('customExtendRoot')(
                                    <Input />
                                )}
                            </div>
                        </div>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">扩充资源盘cdn域名</div>
                                <div className="t2"></div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('customExtendDomain')(
                                    <Input />
                                )}
                            </div>
                        </div>


                        <div className="item">
                            <div className="i-left">
                                <div className="t1">上传视频追加格式或后缀</div>
                                <div className="t2"></div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('customLocalVideoSuffix')(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>

                    <div >
                        <div className="item" >
                            <div className="i-left">
                                <div className="t1">是否开启视频转码</div>
                                <div className="t2">开启则上传视频后自动转码</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('aliyunTranscodeSwitch', { valuePropName: 'checked', initialValue: config_json && config_json.aliyunTranscodeSwitch })(
                                    <Switch checkedChildren="开" unCheckedChildren="关" />
                                )}
                            </div>
                        </div>
                    </div>


                    <div>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">原码转标清</div>
                                <div className="t2">开启并选择转码模板后，自动将原视频转为标清视频</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('transcodeSDSwitch', { valuePropName: 'checked', initialValue: config_json && config_json.transcodeSDSwitch })(
                                    <Switch checkedChildren="开" unCheckedChildren="关" />
                                )}
                                <Button onClick={this.handleSetTemplate.bind(this, "SDTemplate", config_json && config_json.SDTemplate)} type="link">{config_json && config_json.SDTemplate && config_json.SDTemplate.name ? config_json.SDTemplate.name : "设置转码模版"}</Button>
                            </div>
                        </div>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">原码转高清</div>
                                <div className="t2">开启并选择转码模板后，自动将原视频转为高清视频</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('transcodeHDSwitch', { valuePropName: 'checked', initialValue: config_json && config_json.transcodeHDSwitch })(
                                    <Switch checkedChildren="开" unCheckedChildren="关" />
                                )}
                                <Button onClick={this.handleSetTemplate.bind(this, "HDTemplate", config_json && config_json.HDTemplate)} type="link">{config_json && config_json.HDTemplate && config_json.HDTemplate.name ? config_json.HDTemplate.name : "设置转码模版"}</Button>
                            </div>
                        </div>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">原码转超清</div>
                                <div className="t2">开启并选择转码模板后，自动将原视频转为超清视频</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('transcodeLDSwitch', { valuePropName: 'checked', initialValue: config_json && config_json.transcodeLDSwitch })(
                                    <Switch checkedChildren="开" unCheckedChildren="关" />
                                )}
                                <Button onClick={this.handleSetTemplate.bind(this, "LDTemplate", config_json && config_json.LDTemplate)} type="link">{config_json && config_json.LDTemplate && config_json.LDTemplate.name ? config_json.LDTemplate.name : "设置转码模版"}</Button>
                            </div>
                        </div>

                        <div className="item">
                            <div className="i-left">
                                <div className="t1">pipeline_id-视频转码管道id</div>
                                <div className="t2">需在阿里云媒体处理控制台配置</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('aliyunPipelineID', { initialValue: config_json && config_json.aliyunPipelineID || '', })(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">是否开启微信矩阵推送</div>
                            <div className="t2">开启则可以将资讯推送至微信矩阵的对应公众号，推送之后的视频需要在微信矩阵内重新上传才可正常使用</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('weixinPushSwitch', { valuePropName: 'checked' })(
                                <Switch checkedChildren="开" unCheckedChildren="关" />
                            )}
                        </div>
                    </div>
                    <div className={formValues.weixinPushSwitch ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">微信矩阵域名地址</div>
                                <div className="t2">推送到的微信矩阵地址</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('weixinUrl')(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">是否启用https</div>
                            <div className="t2">开启后资讯详情页和分享页、视频分享页为https地址，开启之前请确认网站已配置https服务</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('is_https', { valuePropName: 'checked' })(
                                <Switch checkedChildren="开" unCheckedChildren="关" />
                            )}
                        </div>
                    </div>

                    {/* <div className="item">
                        <div className="i-left">
                            <div className="t1">矩阵号跳转直播地址</div>
                            <div className="t2"></div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('live_url')(
                                <Input />
                            )}
                        </div>
                    </div> */}


                    <div className="item">
                        <div className="i-left">
                            <div className="t1">是否开启广告推送</div>
                            <div className="t2">开启广告推送后需要在广告后台配置对应的广告</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('isOpenAdv', { valuePropName: 'checked' })(
                                <Switch checkedChildren="开" unCheckedChildren="关" />
                            )}
                        </div>
                    </div>
                    <div className={formValues.isOpenAdv ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">广告配置接口域名</div>
                                <div className="t2">请求此域名的接口获取广告</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('advDomain')(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">统计组件Ios_key</div>
                            <div className="t2">查看统计组件苹果端APP使用数据的key</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('Ios_key')(
                                <Input />
                            )}
                        </div>
                    </div>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">统计组件Android_key</div>
                            <div className="t2">查看统计组件安卓端APP使用数据的key</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('Android_key')(
                                <Input />
                            )}
                        </div>
                    </div>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">是否编辑虚拟点赞量</div>
                            <div className="t2">如果配置否，编辑界面不再显示虚拟点赞量、评论量、观看量的编辑模块</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('isVirtualViewData', { valuePropName: 'checked', initialValue: true })(
                                <Switch checkedChildren="开" unCheckedChildren="关" />
                            )}
                        </div>
                    </div>
                    {this.state.permission.indexOf('info_paiban') > -1 &&
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">一键排版规则配置</div>
                                <div className="t2">设置一键排版的规则</div>
                            </div>
                            <div className="i-right">
                                <Button className='i-right-btn' onClick={this.handleSetType.bind(this, "SDTemplate", config_json && config_json.SDTemplate)} type="link">设置</Button>
                            </div>
                        </div>
                    }

                    {this.state.permission.indexOf('info_water_template') > -1 &&
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">水印模板配置</div>
                                <div className="t2">配置图片或视频上传时的水印模板</div>
                            </div>
                            <div className="i-right">
                                <Button className='i-right-btn' onClick={this.handleSetMark} type="link">设置</Button>
                            </div>
                        </div>
                    }

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">设置资讯标题字号</div>
                            <div className="t2">如果未配置则显示默认字号大小</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('titleFontSize')(
                                <InputNumber />
                            )}
                        </div>
                    </div>
                    <div className="item">
                        <div className="i-left">
                            <div className="t1">智能推荐AppId</div>
                            <div className="t2"></div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('recommendAppId')(
                                <Input />
                            )}
                        </div>
                    </div>



                    <div className="item">
                        <div className="i-left">
                            <div className="t1">云平台域名</div>
                            <div className="t2"></div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('saas_domain')(
                                <Input />
                            )}
                        </div>
                    </div>

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">云平台用户access_key</div>
                            <div className="t2"></div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('access_key')(
                                <Input />
                            )}
                        </div>
                    </div>


                    <div className="item">
                        <div className="i-left">
                            <div className="t1">MCH资源地址</div>
                            <div className="t2"></div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('mchFtpUrl')(
                                <Input />
                            )}
                        </div>
                    </div>
                    {this.state.permission.indexOf('info_supervision') > -1 &&
                        <>
                            <div className="item">
                                <div className="i-left">
                                    <div className="t1">监管平台推送域名</div>
                                    <div className="t2"></div>
                                </div>
                                <div className="i-right">
                                    {getFieldDecorator('saasDomain')(
                                        <Input />
                                    )}
                                </div>
                            </div>
                            <div className="item">
                                <div className="i-left">
                                    <div className="t1">监管平台推送站点ID</div>
                                    <div className="t2"></div>
                                </div>
                                <div className="i-right">
                                    {getFieldDecorator('saasSiteId')(
                                        <Input />
                                    )}
                                </div>
                            </div>
                        </>
                    }

                    {this.state.permission.indexOf('info_text_audio') > -1 &&
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">是否开启文本语音</div>
                                <div className="t2">开启后文章详情页可播放文本语音</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('isCreateAudio', { valuePropName: 'checked' })(
                                    <Switch checkedChildren="开" unCheckedChildren="关" />
                                )}
                            </div>
                        </div>
                    }


                    <div className={formValues.isCreateAudio ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">文本语音生成接口地址</div>
                                <div className="t2">文本语音生成接口地址</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('createAudioUrl')(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>

                    <div className={formValues.isCreateAudio ? '' : 'none'}>
                        <div className="item">
                            <div className="i-left">
                                <div className="t1">文本语音生成文件的域名</div>
                                <div className="t2">文本语音生成文件的域名</div>
                            </div>
                            <div className="i-right">
                                {getFieldDecorator('createAudioDomain')(
                                    <Input />
                                )}
                            </div>
                        </div>
                    </div>

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">{this.state.forwardNum ? '随机转发量' : '默认转发量'}</div>
                            <div className="t2">{this.state.forwardNum ? '随机转发量' : '默认转发量'}</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('default_forward_num')(
                                <Input onInput={this.forwardNum} />
                            )}
                        </div>
                    </div>

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">{this.state.thumbsUpNum ? '随机点赞量' : '默认点赞量'}</div>
                            <div className="t2">{this.state.thumbsUpNum ? '随机点赞量' : '默认点赞量'}</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('default_thumbs_up_num')(
                                <Input onInput={this.thumbsUpNum} />
                            )}
                        </div>
                    </div>

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">{this.state.scanNum ? '随机浏览量' : '默认浏览量'}</div>
                            <div className="t2">{this.state.scanNum ? '随机浏览量' : '默认浏览量'}</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('default_scan_num')(
                                <Input onInput={this.scanNum} />
                            )}
                        </div>
                    </div>

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">是否启用文章区域自动识别</div>
                            <div className="t2">开启后如果没选择文章区域，会根据文章标题自动匹配到对应的区域</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('is_area_discern', { valuePropName: 'checked', initialValue: true })(
                                <Switch checkedChildren="开" unCheckedChildren="关" />
                            )}
                        </div>
                    </div>

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">文章取消置顶后是否按创建时间排序</div>
                            <div className="t2">默认放到置顶文章之下，开启后按照时间顺序排序</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('sort_by_time', { valuePropName: 'checked' })(
                                <Switch checkedChildren="开" unCheckedChildren="关" />
                            )}
                        </div>
                    </div>

                    <div className="item">
                        <div className="i-left">
                            <div className="t1">license版本控制</div>
                            <div className="t2">license版本控制</div>
                        </div>
                        <div className="i-right">
                            {getFieldDecorator('license')(
                                <Input />
                            )}
                        </div>
                    </div>


                    <div className="item unline">
                        <Button type="primary" onClick={this.submit}>保存</Button>
                    </div>
                </div>

                <Modal
                    title="选择转码模版"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    width="60%"
                    onCancel={this.handleCancel}
                >
                    <Radio.Group style={{ width: "100%" }} onChange={this.onChange} value={this.state.current.name}>
                        {
                            templateList.map(item => <Row style={{ paddingBottom: 40 }}>
                                <Col span={4}>
                                    <Radio style={radioStyle} value={item.name}>
                                        {item.name}
                                    </Radio>
                                </Col>
                                <Col span={20}>
                                    {item.value instanceof Array ? item.value.map(subItem =>
                                        <Row style={{ paddingBottom: 10 }}>
                                            <Col style={{ fontWeight: 600 }} span={4}>
                                                {subItem.name}
                                            </Col>
                                            <Col style={{ display: "flex", flexWrap: "wrap" }} span={20}>
                                                {
                                                    subItem.value instanceof Array ? subItem.value.map(x => <div style={{ width: "33.3%", paddingBottom: 10 }}>{x.name}：{x.value}</div>) : subItem.value
                                                }
                                            </Col>
                                        </Row>) : item.value}
                                </Col>
                            </Row>)
                        }
                    </Radio.Group>
                </Modal>
                <Modal
                    title="一键排版规则配置"
                    visible={this.state.visibleSetType}
                    onOk={this.handleTypeOk}
                    width="60%"
                    onCancel={this.handleTypeCancel}
                    okText='保存'
                >
                    {/* <div > */}
                    <Form className='type-box' {...layout2}>
                        <FormItem
                            label="字体"
                        >
                            <Select value={this.state.fontFamilyValue} onChange={this.onChangeSelectFamily} style={{ width: '260px' }}   >
                                <Option value="SimSun" style={{ fontFamily: 'SimSun' }}>宋体</Option>
                                <Option value="Microsoft YaHei" style={{ fontFamily: 'Microsoft YaHei' }}>微软雅黑</Option>
                                <Option value="SimKai" style={{ fontFamily: 'SimKai' }}>楷体</Option>
                                <Option value="SimHei" style={{ fontFamily: 'SimHei' }}>黑体</Option>
                                <Option value="SimLi" style={{ fontFamily: 'SimLi' }}>隶书</Option>
                                <Option value="andale mono" style={{ fontFamily: 'andale mono' }}>andale mono</Option>
                                <Option value="arial" style={{ fontFamily: 'arial' }}>arial</Option>
                                <Option value="arial black" style={{ fontFamily: 'arial black' }}>arial black</Option>
                                <Option value="comic sans ms" style={{ fontFamily: 'comic sans ms' }}>comic sans ms</Option>
                                <Option value="impact" style={{ fontFamily: 'impact' }}>impact</Option>
                                <Option value="times new roman" style={{ fontFamily: 'times new roman' }}>times new roman</Option>
                            </Select>
                        </FormItem>
                        <FormItem
                            label="字号"
                        >
                            <Select value={this.state.fontSizeValue} onChange={this.onChangeSelectSize} style={{ width: '260px' }}  >
                                <Option value='10px' style={{ fontSize: '10px' }}>10px</Option>
                                <Option value='11px' style={{ fontSize: '11px' }}>11px</Option>
                                <Option value='12px' style={{ fontSize: '12px' }}>12px</Option>
                                <Option value='14px' style={{ fontSize: '14px' }}>14px</Option>
                                <Option value='16px' style={{ fontSize: '16px' }}>16px</Option>
                                <Option value='18px' style={{ fontSize: '18px' }}>18px</Option>
                                <Option value='20px' style={{ fontSize: '20px' }}>20px</Option>
                                <Option value='24px' style={{ fontSize: '24px' }}>24px</Option>
                                <Option value='36px' style={{ fontSize: '36px' }}>36px</Option>

                            </Select>
                        </FormItem>
                        <FormItem
                            label="文字颜色"
                        >
                            <Input type='color' value={this.state.fontColorValue} onChange={this.onChangeSelectColor} style={{ width: '260px' }} />

                        </FormItem>
                        <FormItem
                            label="段前距"
                        >
                            <Select value={this.state.beforeInterval} onChange={this.onChangeSelectBefore} style={{ width: '260px' }} >
                                <Option value="5"  >5</Option>
                                <Option value="10" >10</Option>
                                <Option value="15" >15</Option>
                                <Option value="20" >20</Option>
                                <Option value="25" >25</Option>
                            </Select>

                        </FormItem>
                        <FormItem
                            label="段后距"
                        >
                            <Select value={this.state.afterInterval} onChange={this.onChangeSelectAfter} style={{ width: '260px' }} >
                                <Option value="5"  >5</Option>
                                <Option value="10" >10</Option>
                                <Option value="15" >15</Option>
                                <Option value="20" >20</Option>
                                <Option value="25" >25</Option>
                            </Select>

                        </FormItem>
                        <FormItem
                            label="行间距"
                        >
                            <Select value={this.state.lineheight} onChange={this.onChangeSelectrow} style={{ width: '260px' }} >
                                <Option value="1"  >1</Option>
                                <Option value="1.5" >1.5</Option>
                                <Option value="1.75" >1.75</Option>
                                <Option value="2" >2</Option>
                                <Option value="3" >3</Option>
                                <Option value="4" >4</Option>
                                <Option value="5" >5</Option>
                            </Select>

                        </FormItem>
                        <FormItem
                            label="首行缩进"
                        >
                            <Radio.Group style={{ width: '260px' }} onChange={this.onChangeRadio} value={this.state.indent}>
                                <Radio value='open'>开启</Radio>
                                <Radio value='close'>关闭</Radio>
                            </Radio.Group>

                        </FormItem>
                        <FormItem
                            label="对齐方式"
                        >
                            <Radio.Group style={{ width: '260px' }} onChange={this.onChangeRadioButton} value={this.state.justify}>
                                <Radio.Button value="left" ><Icon type="align-left" /></Radio.Button>
                                <Radio.Button value="center" ><Icon type="align-center" /></Radio.Button>
                                <Radio.Button value="right" ><Icon type="align-right" /></Radio.Button>
                                <Radio.Button value="justify" ><Icon type="menu" /></Radio.Button>
                            </Radio.Group>

                        </FormItem>
                    </Form>
                    {/* </div> */}
                </Modal>

                <Modal
                    title="水印模板配置"
                    visible={this.state.visibleSetMark}
                    onOk={this.handleSetMarkOk}
                    width="60%"
                    onCancel={this.handleSetMarkCancle}
                    okText='保存'
                >
                    <div>
                        <Button type="primary" style={{ marginBottom: '20px' }} onClick={() => this.handleAddMark('新建模板')}>新建模板</Button>
                        <Table
                            dataSource={this.state.waterMarkList}
                            columns={columns} />
                    </div>
                </Modal>
                <Modal
                    title={this.state.type}
                    visible={this.state.visibleAddMark}
                    onOk={() => this.handleAddMarkOk(this.state.type)}
                    width="60%"
                    onCancel={this.handleAddMarkCancle}
                    okText='保存'
                >
                    {/* <div> */}
                    <Form
                        {...layout}
                    >
                        <FormItem
                            label="水印模板名称"
                        >
                            {getFieldDecorator('mark_name', {
                                rules: [{
                                    required: true, message: '请输入转码模板名称',
                                }],
                                // initialValue: "测试一回合"
                            })(
                                <Input />
                            )}


                        </FormItem>
                        <FormItem
                            label="占比(%)"
                        >
                            {getFieldDecorator('mark_proportion')(
                                <InputNumber style={{ width: '100%' }} min={0} max={100} onChange={this.onChangeNum} suffix='%' />
                            )}


                        </FormItem>
                        <FormItem
                            label="位置"
                        >
                            {getFieldDecorator('mark_position', { initialValue: 'se' })(
                                <Radio.Group name="radiogroup" >
                                    <Radio value='ne'>右上</Radio>
                                    <Radio value='nw'>左上</Radio>
                                    <Radio value='se'>右下</Radio>
                                    <Radio value='sw'>左下</Radio>
                                </Radio.Group>
                            )}

                        </FormItem>
                        <FormItem
                            label="水平偏移量"
                        >
                            {getFieldDecorator('mark_x', {

                                // initialValue: "测试一回合"
                            })(
                                <Input />
                            )}


                        </FormItem>
                        <FormItem
                            label="垂直偏移量"
                        >
                            {getFieldDecorator('mark_y', {

                                // initialValue: "测试一回合"
                            })(
                                <Input />
                            )}


                        </FormItem>
                        <FormItem
                            label="上传水印图片"
                        >
                            {getFieldDecorator('mark_img', {
                                rules: [{
                                    required: true, message: '请上传水印图片！',
                                }],
                                // initialValue: "测试一回合"
                            })(

                                <div style={{ width: '140px', height: '140px' }} onClick={() => this.fcUpload('mark_img')}>
                                    {
                                        formValues.mark_img ? <img style={{ width: '100%', verticalAlign: 'baseline' }} src={formValues.mark_img} /> : <div style={{ width: '140px', height: '140px', backgroundColor: '#eee', border: '1px dashed #ccc', color: '#ccc', textAlign: 'center', lineHeight: '140px', fontSize: '20px' }} ><Icon type='plus' /></div>
                                    }


                                </div>

                            )}


                        </FormItem>
                    </Form>
                    {/* </div> */}
                </Modal>
            </section>

        )
    }
}

